<template>
    <el-dialog :model-value="dialogFormVisible" :destroy-on-close="true" title="商户开卡配置" width="600px"
        @close="emits('closeDialog')">
        <el-form ref="dialogFormRef" :model="dialogForm" :label-width="formLabelWidth" :rules="rules">
            <el-form-item label="商户id" prop="merchant_id">
                <el-input v-model="dialogForm.merchant_id" />
            </el-form-item>
            <el-form-item label="名称" prop="name">
                <el-input v-model="dialogForm.name" />
            </el-form-item>
            <el-form-item label="英文名称" prop="en_name">
                <el-input v-model="dialogForm.en_name" />
            </el-form-item>
            <el-form-item label="区域(内部备注)" prop="region">
                <el-input v-model="dialogForm.region" />
            </el-form-item>
            <el-form-item label="业务场景(内部备注)" prop="business">
                <el-input v-model="dialogForm.business" />
            </el-form-item>
            <el-form-item label="卡种类(内部备注)" prop="card_type">
                <el-input v-model="dialogForm.card_type" />
            </el-form-item>
            <el-form-item label="卡品牌(内部备注)" prop="card_type">
                <el-input v-model="dialogForm.brand" placeholder="VISA,MasterCard等" />
            </el-form-item>
            <el-form-item label="发卡渠道" prop="issuer_channel">
                <el-select clearable v-model="dialogForm.issuer_channel" placeholder="发卡渠道">
                    <el-option
                        v-for="item in issueChannelData"
                        :key="item.value"
                        :label="item.name"
                        :value="item.value"
                    >
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="渠道API对接商户" prop="issuer_client">
                <el-select clearable v-model="dialogForm.issuer_client" placeholder="渠道API对接商户">
                    <el-option
                        v-for="item1 in issueClientData"
                        :key="item1.value"
                        :label="item1.name"
                        :value="item1.value"
                    >
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="开卡手续费率" prop="card_rate">
                <el-input v-model="dialogForm.card_rate" type="number" />
            </el-form-item>
            <el-form-item label="开卡美金费用" prop="card_usd_fee">
                <el-input v-model="dialogForm.card_usd_fee" type="number" />
            </el-form-item>
            <el-form-item label="是否通过线下开卡" :label-width="formLabelWidth" prop="is_offline">
                <el-select v-model="dialogForm.is_offline" placeholder="是否通过线下开卡">
                    <el-option label="否" :value="0" />
                    <el-option label="是" :value="1" />
                </el-select>
            </el-form-item>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="emits('cancel')">取消</el-button>
                <el-button type="primary" @click="submit(dialogForm)" :loading="btnLoading">
                    提交
                </el-button>
            </span>
        </template>
    </el-dialog>
</template>
<script setup>
import { ref } from "vue";
const dialogFormRef = ref(null);

defineProps({
    dialogFormVisible: {
        type: Boolean,
        default: false,
    },
    dialogForm: {
        type: Object,
        default: {
            id: "",
            merchant_id: "",
            name: "",
            en_name: "",
            region: "",
            business: "",
            card_type: "",
            brand: "",
            issuer_client: "",
            issuer_channel: "",
            card_rate: 0,
            card_usd_fee: 0,
            is_offline: ""
        },
    },
    btnLoading: {
        type: Boolean,
        default: false,
    },
    issueChannelData: {type: Object, default: []},
    issueClientData: {type: Object, default: []},
});
const emits = defineEmits(["closeDialog", "cancel", "submitForm"]);

const formLabelWidth = "150px";
// 校验
const rules = {
    merchant_id: [{ required: true, message: "请输入商户id", trigger: "blur" }],
    name: [{ required: true, message: "请输入中文名称", trigger: "blur" },],
    en_name: [{ required: true, message: "请输入英文名称", trigger: "blur" },],
    issuer_channel: [{ required: true, message: "请输入开卡渠道", trigger: "blur" },],
    issuer_client: [{ required: true, message: "请选择渠道API对接商户", trigger: "blur" },],
    card_rate: [{ required: true, message: "请输入开卡手续费率", trigger: "blur" },],
};
// 提交
const submit = (dialogForm) => {
    dialogFormRef.value
        .validate()
        .then(async () => {
            try {
                const param = Object.assign({}, dialogForm);
                emits("submitForm", param);
            } catch (error) {
                return false;
            }
        })
        .catch((error) => {
            return false;
        });
};
</script>
  